//************************************************
//* 本页面为手工编写的关于费用类的明细表页面
//************************************************
<template>
	<view>
		<view class="card-container">
		<vol-table :url="tableUrl" @rowClick="rowClick" @cellClick="cellClick" :defaultLoadPage="load"
			@loadBefore="loadBefore" :height="tableHeight" :titleField="titleField" :index="rowIndex"
			@loadAfter="loadAfter" ref="table" :direction="direction" @formatter="formatter" :columns.sync="columns"
			:textInline="textInline">
		</vol-table>
		</view>
		<view class="card-container">
		<view class="fn-title">拍照上传</view>
		<u-upload
				:fileList="fileList1"
				@afterRead="afterRead"
				@delete="deletePic"
				name="1"
				multiple
				:maxCount="10"
			></u-upload>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList1: [],
				curr_row: null,
				load: false, //默认是否加载数据
				rowIndex: true, //显示行号
				titleField: 'reim_id', //列表的标题字段,这里的字段必须在columns中存在，否则报错 by huangxs 2022年6月14日 15:54:13
				tableUrl: "api/Fk_reimlist/getPageData",
				//设置table为水平显示或者list列表显示'horizontal'//list
				direction: "list",
				tableHeight: 0, //表格高度，默认100%高度
				textInline: false, //表格内容超出是否换行
				columns: [{
						field: 'reimlist_id',
						title: 'reimlist_id',
						type: 'int',
						width: 80,
						hidden: true,
						require: true,
						align: 'left'
					},
					{
						field: 'reim_id',
						title: 'reim_id',
						type: 'int',
						width: 80,
						hidden: true,
						align: 'left'
					},
					{
						field: 'fzdate',
						title: '发票日期',
						type: 'date',
						width: 120,
						edit: {
							type: 'date'
						},
						align: 'left',
						sort: true
					},
					{
						field: 'tick_type',
						title: '发票类别',
						type: 'string',
						bind: {
							key: 'pj_typelist',
							data: []
						},
						width: 150,
						edit: {
							type: 'select'
						},
						align: 'left',
						sort: true
					},
					{
						field: 'rcntr',
						title: '成本中心/研发项目',
						type: 'string',
						bind: {
							key: 'cntr',
							data: []
						},
						width: 180,
						edit: {
							type: 'select'
						},
						align: 'left',
						sort: true
					},
					{
						field: 'fei_type',
						title: '科目',
						type: 'string',
						bind: {
							key: 'fei_typelist',
							data: []
						},
						width: 180,
						edit: {
							type: 'select'
						},
						align: 'left'
					},
					{
						field: 'cc_bdate',
						title: '出差起时间',
						type: 'datetime',
						width: 150,
						edit: {
							type: 'datetime'
						},
						align: 'left',
						sort: true
					},
					{
						field: 'cc_edate',
						title: '出差止时间',
						type: 'datetime',
						width: 150,
						edit: {
							type: 'datetime'
						},
						align: 'left',
						sort: true
					},
					{
						field: 't_num',
						title: '天数',
						type: 'int',
						width: 80,
						edit: {
							type: 'decimal'
						},
						readonly: true,
						align: 'left'
					},
					{
						field: 'r_num',
						title: '人数',
						type: 'int',
						width: 80,
						edit: {
							type: 'number'
						},
						align: 'left'
					},
					{
						field: 'b_dd',
						title: '起地',
						type: 'string',
						width: 220,
						edit: {
							type: 'text'
						},
						align: 'left'
					},
					{
						field: 'e_dd',
						title: '止地',
						type: 'string',
						width: 220,
						edit: {
							type: 'text'
						},
						align: 'left'
					},
					{
						field: 'tax',
						title: '税额',
						type: 'decimal',
						width: 110,
						edit: {
							type: 'decimal'
						},
						align: 'left'
					},
					{
						field: 'ws_je',
						title: '未税金额',
						type: 'decimal',
						width: 110,
						readonly: true,
						edit: {
							type: 'decimal'
						},
						align: 'left'
					},
					{
						field: 'je',
						title: '金额(含税)',
						type: 'decimal',
						width: 100,
						edit: {
							type: 'decimal'
						},
						align: 'left'
					},

					{
						field: 'tickno',
						title: '票号',
						type: 'string',
						width: 100,
						edit: {
							type: 'text'
						},
						require: true,
						align: 'left'
					},
					{
						field: 'fujian',
						title: '附件',
						type: 'img',
						width: 110,
						align: 'left'
					},

					{
						field: 'remark',
						title: '备注',
						type: 'string',
						width: 220,
						edit: {
							type: 'textarea'
						},
						align: 'left'
					},
					{
						field: 'jk_content',
						title: '扣减事项',
						type: 'string',
						width: 220,
						edit: {
							type: 'text'
						},
						align: 'left'
					},
					{
						field: 'jk_je',
						title: '扣减金额(含税)',
						type: 'decimal',
						width: 110,
						edit: {
							type: 'decimal'
						},
						align: 'left'
					},
					{
						field: 'check_je',
						title: '审核金额(含税)',
						type: 'decimal',
						width: 110,
						edit: {
							type: 'decimal'
						},
						lign: 'left'
					},
				]
			}
		},
		onLoad() {

			//#ifdef  H5

			//#endif
			let _this = this;

			uni.getSystemInfo({
				success: function(res) {
					_this.tableHeight = res.windowHeight - 70;
				}
			});
		},
		methods: {
			formatter(row, column, index, callback) { //格式化单元格数据
				/* if (column.field == 'UserName') {
					return callback('<a style="color:red;">' + row.UserName + '</a>')
				}
				return callback(row[column.field]) */
			},
			rowClick(index, row) {
				this.$toast(`点击了第${index}行`)
			},
			cellClick(index, row, column) { //判断单元格点击事件
				this.$toast("ddd")

			},
			loadAfter() {},
			loadBefore(params, callback) {
				let wheres = [{
					'name': 'reim_id',
					'value': this.curr_row.reim_id,
					//'displayType': 'like'//设置为模糊查询,其他不需要设置
				}]
				//也可以提交一些其他参数，后台在GetPageData()方法读取options.value
				//param.value = "xxx";

				params.wheres.push(...wheres);
				//console.log(params)
				callback(true);
			},
			onShow() {
				//#ifdef MP-WEIXIN
				//this.curr_row = uni.getStorageSync("curr_row");
				//this.$refs.table.load(null,true)//
				//#endif

				this.$nextTick(() => { //页面之间传数据最好使用getStorageSync，否则不兼容小程序 by huangxs2022年6月14日 17:04:34
					this.curr_row = uni.getStorageSync("curr_row");
					this.$refs.table.load(null,
						true) //刷新数据，先要关闭vol-table控件默认的数据加载方式，因为不起作用查询条件不起作用by huangxs 2022年6月15日 08:09:43
				})

			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
							// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
							let lists = [].concat(event.file)
							let fileListLen = this[`fileList${event.name}`].length
							lists.map((item) => {
								this[`fileList${event.name}`].push({
									...item,
									status: 'uploading',
									message: '上传中'
								})
							})
							for (let i = 0; i < lists.length; i++) {
								const result = await this.uploadFilePromise(lists[i].url)
								let item = this[`fileList${event.name}`][fileListLen]
								this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
									status: 'success',
									message: '',
									url: result
								}))
								fileListLen++
							}
						},
			uploadFilePromise(url) {
				//console.log(url)
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.http.ipAddress + "api/Fk_reim/upload",
						filePath: url,
						name: 'fileInput',//vol框架上传固定名称
						formData: {
						},
						header: {
							"Authorization": this.$store.getters.getToken()//vol框架授权
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	.card-container {
		box-shadow: 1px 1px 9px #efefef;
		margin: 2rpx;
		border: 1px solid #f1f1f1;
		border-radius: 10rpx;
		padding: 20rpx 4rpx;

		.fn-title {
			font-size: 28rpx;
			color: #8f9ca2;
			padding: 4rpx 10 30rpx 20rpx;
		}

		.grid-text {
			padding: 12rpx 0 30rpx 0rpx;
			font-size: 20rpx;
		}
	}
</style>
